import defaultImg from '@/assets/images/200.png'// 加载错误时使用
import { useIntersectionObserver } from '@vueuse/core'
// import {createApp} from 'vue'
// 在vue3中createApp方法每执行一次，都会生成一个独立的vue应用实例
// 而每一个独立的应用实例，各自拥有自己的·作用域·并不会全局共享
// 如果想要共享，这里必须使用由main.js有createApp方法产出的app实例
// 结局思路：把全局指令的定义写成插件的形式
// 依靠注册插件时的use方法就可以拿到main.js中的唯一实例
// 指令
// 定义图片懒加载指令
export default {
  install (app) {
    console.log('全局指令位置使用', app)
    // app实例身上有全局注册指令方法
    app.directive('lazyload', {
      mounted (el, binding) {
        // el拿到就是img的dom对象,
        // binding里面有个vlaue，拿到的是图片url地址

        const { stop } = useIntersectionObserver(
          el, // 监听目标元素
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 发生错误就加载默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              // 图片进入视口加载图片
              el.src = binding.value
              stop()
            }
          },
          { threshold: 0 }
        )
      }
    })
  }
}
